<template>
    <div class="seach">
        <div class="top clearfix">
            <span class="fl one"><img src="../assets/seach.png" alt=""></span>
            <span class="fl two"><input type="text" placeholder="请输入搜索内容"></span>
            <span class="fr three">搜索</span>
        </div>
        <div class="list">
            <ul>
                <li class="clearfix">
                    <span class="fl">20190613班</span>
                    <span class="fr"><img src="../assets/sea_03.png" alt=""></span>
                </li>
                <li class="clearfix">
                    <span class="fl">赵建国班</span>
                    <span class="fr"><img src="../assets/sea_03.png" alt=""></span>
                </li>
                <li class="clearfix">
                    <span class="fl">高中数学</span>
                    <span class="fr"><img src="../assets/sea_03.png" alt=""></span>
                </li>
                <li class="clearfix">
                    <span class="fl">河南省特级教师</span>
                    <span class="fr"><img src="../assets/sea_03.png" alt=""></span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'seach'
    }
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.seach{
    font-size: 0;
    width: 100%;
    .top{
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0.65rem 0.2rem 0.3rem;
        border-bottom: 1px solid #eee;
       .one{
           display:inline-block;
            width: 0.4rem;
            height: 0.4rem;
            margin-right:0.2rem;
            margin-top:3px;
            img{
                width: 100%;
            }
       } 
       .two{
           width: 80%;
        //    border: 1px solid red;
           display: inline-block;
           height: 0.5rem;
           input{
               width: 100%;
               height: 95%;
               background-color: transparent;
               text-indent: 0.15rem;
               &::placeholder{
                   font-family: @family;
                    font-size: 0.2rem;
                    color:rgb(159,159,159);
               }
           }
       }
       .three{
           font-family: @family;
           font-size: 0.3rem;
           color:rgb(43,153,255);
           margin-top:3px;
       }
    }
    .list{
        font-family: @family;
        font-size: 0.3rem;
        color:rgb(124,124,124);
        li{
            background-color: #fff;
            line-height: 0.7rem;
            padding: 0 0.2rem;
            box-sizing: border-box;
            span.fr{
                display: inline-block;
                width: 0.27rem;
                height: 0.22rem;
                img{
                    width: 100%;
                }
            }
        }
    }
}

</style>